<template>
	<view class="">
		<view class="mt30 tc f32 fb">您的词汇量约为</view>
		<view class="detecbox_kaishi_img d-c-c">
			<image src="/static/curr/wanc_back.png" mode="heightFix"></image>
			<view class="detecbox_kaishi_text">{{ score }}</view>
		</view>
		<view class="tc gray3 f26">相当于{{ levelText }}</view>
		<view class="cihuicen">
			<view class="gray3 fb f30">各类考试所需单词量参考数据</view>
			<view class="cihuicen_top">
				<view class="cihuicen_top_item1" v-for="(item, index) in levelData" :key="index" v-if="index < 3">
					<view class="cihuicen_top_num">{{ item.num }}</view>
					<view class="cihuicen_top_text">{{ item.text }}</view>
				</view>
			</view>
			<view class="cihuicen_top">
				<view class="cihuicen_top_item2" v-for="(item, index) in levelData" :key="index" v-if="index > 2">
					<view class="cihuicen_top_num">{{ item.num }}</view>
					<view class="cihuicen_top_text">{{ item.text }}</view>
				</view>
			</view>
		</view>
		<view class="cihuicen_zc" @tap="testAgain">再测一次</view>
		<view style="height: 40rpx;"></view>
		<!-- <view class="cihuicen_fx">分享</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 0,
				levelText: '',
				levelData: [],
			}
		},
		onLoad(option) {
			let score = 0
			if (option.score) {
				score = option.score
			}
			this.getReport(score)
		},
		onBackPress(option) {
			if (option.from == 'navigateBack' || option.from == 'backbutton') {
				uni.reLaunch({
					url: '/pages/user/user'
				})
				return true
			}
			return false
		},
		methods: {
			getReport(score) {
				this.$u.post(this.$u.api.examReport, {
					score: score
				}).then((res) => {
					let data = res.data
					this.score = data.score
					this.levelText = data.word_base_text
					this.levelData = data.word_base_data
				}).catch((err) => {
					console.log(err)
				})
			},
			testAgain() {
				uni.navigateTo({
					url: '/pages/user/exam/word'
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.detecbox_kaishi_img{
		// width: 50vw;
		height: 22vh;
		margin: 2vh auto;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.detecbox_kaishi_text{
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 78rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-shadow: 0rpx 0rpx 5rpx #F06600;
		text-stroke: 1px #EF7F00;
		-webkit-text-stroke: 1px #EF7F00;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -50rpx;
		margin-left: -100rpx;
	}
	.cihuicen{
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 2vh auto;
		padding: 2vh 30rpx;
	}
	.cihuicen_top{
		display: flex;
		justify-content: space-between;
	}
	.cihuicen_top_item1{
		width: 30%;
		background: #F6F7F9;
		border-radius: 20rpx;
		margin-top: 2vh;
		text-align: center;
	}
	.cihuicen_top_item2{
		width: 47%;
		background: #F6F7F9;
		border-radius: 20rpx;
		margin-top: 2vh;
		text-align: center;
	}
	.cihuicen_top_num{
		font-weight: bold;
		font-size: 30rpx;
		color: #3777E5;
		margin: 2vh auto 2vh;
	}
	.cihuicen_top_text{
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 2vh;
	}
	.cihuicen_zc{
		width: 92%;
		text-align: center;
		height: 110rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 55rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 110rpx;
		margin: 4vh auto 2vh;
	}
	.cihuicen_fx{
		width: 92%;
		text-align: center;
		height: 110rpx;
		background: linear-gradient(250deg, #F85548, #F77B2D);
		border-radius: 55rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 110rpx;
		margin: 4vh auto 2vh;
	}
</style>
